<template>
  <div class="header">
    <div class="logo">
      <img :src="setting.logo" alt="" />
    </div>
    <div class="user_info">
      <span class="user_info_item">
        {{ $t("余额") }}：<span class="user_info_data">{{ userInfo.price }}</span>
      </span>
      <span class="user_info_item">
        {{ $t("收益") }}：<span class="user_info_data">{{
          Number(status.member_price) + Number(status.yingkui)
        }}</span></span
      >
      <!-- <span class="user_info_item">
        已用保证金：<span class="user_info_data">0.00</span></span
      >
      <span class="user_info_item">
        可用保证金：<span class="user_info_data">0.00</span></span
      >
      <span class="user_info_item">
        保证金比例：<span class="user_info_data">0.00</span></span
      > -->
    </div>
    <div class="option">
      <selectView></selectView>
      <userCenter :userInfo="userInfo" :setting="setting"></userCenter>
    </div>
  </div>
</template>

<script>
import selectView from "@/components/select";
import userCenter from "@/components/userCenter";
import { UserInfoApi, yingkuiApi, settingApi } from "@/api/index";
export default {
  components: { selectView, userCenter },
  data() {
    return {
      userInfo: {},
      timer: null,
      status: {},
      setting: {},
    };
  },
  mounted() {
    this.getSetting();
    this.getUserInfo();
    this.getMoney();
    this.timer = setInterval(() => {
      this.getMoney();
    }, 20000);
  },
  unmounted() {
    clearInterval(this.timer);
  },
  methods: {
    getSetting() {
      settingApi().then((res) => {
        console.log(res.data, "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
        this.setting = res.data;
      });
    },
    getUserInfo() {
      UserInfoApi({ token: localStorage.getItem("token") }).then((res) => {
        console.log(res.data);
        this.userInfo = res.data;
      });
    },
    getMoney() {
      let obj = {
        token: localStorage.getItem("token"),
        status: -1,
      };
      yingkuiApi(obj).then((res) => {
        console.log(res.data);
        this.status = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 62px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #282b37;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .logo {
    width: auto;
    height: 62px;
    padding: 0.3125rem 0 0.3125rem 22px;
    img {
      height: 100%;
    }
  }
  .user_info {
    flex: 1;
    text-align: end;
    padding-right: 3rem;
    .user_info_item {
      margin-right: 1rem;
      color: #838795;
      .user_info_data {
        color: #f8f9fa;
      }
    }
  }
  .option {
    padding-right: 10px;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
  }
}
</style>
